<template>
  <div id="product-new-page">
    <div class="page-title" style="background: none; color: #FFFFFF"
         :style="{
      top:(this.getSafeArea().top)+'px',
         }"
    >
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>新品推荐</span>
    </div>

    <div class="top-page-banner" :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <img ref="top-page-banner-img" :style="{height:imageHeight+'px'}" :src="'/static/page-bg/product-new-page-bg.png'" alt="">
    </div>


    <i-scroller-box id="product-list" style="overflow-y: auto; overflow-x: hidden" ref="i-scroller-box" url="ShopProduct/getList"
                    :height="getWinSize().height-190-this.getSafeArea().top"
                    :style="{
      width:'100%',
      height: (getWinSize().height-imageHeight-this.getSafeArea().top)+'px',
      top:(imageHeight+this.getSafeArea().top)+'px'
         }">
      <template v-slot:list-item="{index,data}">
        <div class="item" :key="index">
          <div class="left">
            <img :src="data.image" alt="">
          </div>
          <div class="right">
            <div class="title">
              <span v-text="data.name" class="ovd_s"></span>
            </div>
            <div class="tag-box">
              <el-tag type="warning" v-for="(_tag,_index) in data.hotTag" :key="_index" v-text="_tag"></el-tag>
            </div>
            <div class="buy-box">
              <div class="price" v-text="'￥'+ToMoney(data.price)"></div>
              <el-button type="danger" @click="$router.push('/ProductDetail?id='+data.id)">立即购买</el-button>
            </div>
          </div>
          <div class="c"></div>
        </div>

      </template>
    </i-scroller-box>


<!--    <div class="product-list"-->
<!--         :style="{-->
<!--      width:'100%',-->
<!--      marginTop:imageHeight+'px'-->
<!--         }">-->
<!--    </div>-->
  </div>
</template>

<script>
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: 'ProductNew',
  components: {IScrollerBox},
  data:function () {
    return {
      imageHeight:(this.getWinSize().width*0.5),
      productList:[]
    }
  },
  mounted () {
    this.getList()
  },
  methods:{
    getList:function () {
      var params={
        form:{isHotTag:1,sortOrder:'ASC',sortProp:'id'}
      }
      this.$refs['i-scroller-box'].getList(params)
    }
  }
}
</script>

<style scoped>

</style>
